<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="./css/article.css" />
		<style>
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 220px;
				background: url(img/Pacman.gif) no-repeat center;
				background-size: content;			
			}			
			#main {
				width: 90%;
				margin: 0 5%;
			}
			::-webkit-scrollbar{
				display: none;
			}
			.a_about {
				float: right;				
				color:#a5a5a5
			}
			
			.post-time {
				margin: 0 0.03rem;
			}
			
			.post-title {
				font-size: 0.28rem;
				text-align: center;
				font-weight: 400;
				margin: 0.30rem 0 0.10rem;
				color:#000000;
			}
			
			.post-meta {
				text-align: center;
				color: #999;
				font-size: 0.14rem;
			}
			
			.post-meta>span {
				float: left;
			}
			
			.post-icon {
				margin: 0 0.03rem;
			}
			
			.post-header {
				margin-bottom: 0.40rem;
			}
			
			.author {
				display: inline-block;
				position: relative;
				margin-right: 0.1rem;
				top: -0.06rem;
			}
			
			.author img {
				width: 0.30rem;
				height: 0.30rem;
				border-radius: 50%;
				border: 0.01rem solid #ddd;
			}
			
			.author_name {
				display: inline-block;
				line-height: 0.25rem;
				display: flex;
			}
			
			.content {
				width: 100%;
				height: 100%;
				/*color: #c8c8c8;!important;*/				
			}
		</style>
	</head>

	<body>
		<div id="main" class="markdown-body">
			<div class="post-header">
				<div class="post-title"></div>
				<div class="post-meta">
					<span class="author">
						<img src="" alt="" />						
					</span>
					<span></span>
					<div class="a_about">
						<span></span>
						<span class="post-time"></span>
					</div>
				</div>
			</div>
			<div class="content"></div>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script>
		$(function() {
			//			var rootUrl = 'http://api.iplanfly.com';
			var rootUrl = 'http://api.li-shang-bin.com';
			document.documentElement.style.fontSize = document.documentElement.offsetWidth / 6.4 + 'px';
			console.log(document.documentElement.offsetWidth)
			let mc = {
				getData: function(url, callback) {
					$.ajax({
						type: 'get',
						'data': data,
						dataType: 'jsonp',
						url: rootUrl + url,
						success: function(out) {
							if(typeof callback === 'function') {
								callback(out)
							}
						},
						error: function(err) {
							console.log(err)
						}

					})
				},
				postData: function(url, data, callback) {
					$.post(rootUrl + url, data, function(out) {
						if(typeof callback === 'function') {
							callback(out)
						}
					})
				},
				getUrlVars: function(url) {
					var hash;
					var myJson = {};
					var hashes = url.slice(url.indexOf('?') + 1).split('&');
					var arr = [];
					for(var i = 0; i < hashes.length; i++) {
						hash = hashes[i].split('=');
						if(myJson.hasOwnProperty(hash[0])) {
							myJson[hash[0]] = myJson[hash[0]] + ',' + hash[1]
						} else {
							myJson[hash[0]] = hash[1]
						}
					}
					return myJson;
				},
				moment: function(value) {
					var cdate = new Date(value * 1000);
					return cdate.getFullYear() + '-' + (cdate.getMonth() + 1) + '-' + cdate.getDate()
				}
			}
			var obj = mc.getUrlVars(decodeURI(window.location.href))
			console.log(obj)
			mc.postData('/iweb/topic/queryDetail', { topic_id: obj.topic_id }, function(out) {
				var data = JSON.parse(out).data;
				console.log(data)
				if(data.content){					
				var htmlContent = data.content;
				$('.post-title').html(data.title);
				$('.author>img').prop('src', rootUrl + data.avatar);
				$('.post-meta span').eq(1).html(data.nickname)
				$('.a_about .post-time').html(mc.moment(data.c_time));
				$('.a_about span').eq(0).html(data.browser_num + ' 浏览')
				$('.content').html(htmlContent)
				$('body').css('background','none')
				
				}else{
					$('.content').html('获取文章失败，请确定请求信息')
					$('body').css('background','none')
				}
			})

		})
	</script>
</html>